<template>
	<div class="container">
	  <div class="header">
		<router-link to="">
		  <i class="iconfont icon-back" @click="$router.back()"></i>
		</router-link>
		<p>收货地址</p>
	  </div>
	  <div class="content">
		<ul>
		  <li v-for="item in list" :key="item.id" :class="{ default: item.isDefault === 1 }">
			<p class="address-one">
			  <span>{{ item.receiveName }}</span>
			  <span>{{ item.receivePhone }}</span>
			</p>
			<p class="title">
			  {{ item.receiveRegion }}-{{ item.receiveDetail }}
			</p>
			<br>
			<button><i class="iconfont icon-remove" @click="remove(item.id)"></i></button>
			<button><i class="iconfont icon-edit"></i></button>
			<span class="box" v-if="item.isDefault === 1">默认地址</span>
			<button v-else @click="setDefault(item.id)">设为默认</button>
		  </li>
		</ul>
		<button>新增地址</button>
	  </div>
	</div>
  </template>
  
  <script>
  import { AddressApi } from "@/api";
  
  export default {
	name: "Address",
	data() {
	  return {
		list: []
	  }
	},
	methods: {
	  setDefault(id) {
		this.$request({
		  url: "/address/set_default/" + id,
		})
		  .then(() => {
		  
			this.list.forEach(item => item.isDefault = item.id === id ? 1 : 0)
			this.$miNotice("默认地址设置成功")
		  })
		  .catch(() => {
		  })
	  },
	  remove(id) {
	   
		this.$miConfirm('真删?')
		  .then(() => {
			return this.$request({
			  url: "/address/remove/" + id,
			})
		  })
  
		  .then(() => {
			this.list.splice(this.list.findIndex(item => item.id === id), 1)
		  
			this.$miNotice('地址删除成功..')
		  })
		  .catch(() => {
		  })
  
  
	  }
	},
	created() {
	  AddressApi.getList()
		.then(list => {
		  this.list = list;
		})
		.catch(() => {
  
		})
	},
  }
  </script>
  
  <style scoped>
  .container {
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
	background-color: #fff;
  }
  
  .header {
	flex-shrink: 0;
	height: 45px;
	display: flex;
	align-items: center;
  }
  
  .header p {
	font-size: 18px;
	margin-left: 146px;
	color: rgba(0, 0, 0, 0.8);
  }
  
  .content ul li {
	padding: 20px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.4);
  }
  
  .address-one {
	display: flex;
	justify-content: space-between;
  }
  
  .box {
	font-size: 12px;
	padding: 2px;
	color: #b60909;
	border: 1px solid #b60909;
  }
  
  .title {
	font-size: 12px;
	color: rgba(0, 0, 0, 0.4);
	margin-top: 10px;
	margin-left: 10px;
  }
  </style>